<template>
  <div class="app-container">
    <search @seach="seach"></search>
  <div class="map-box" v-loading.body="listLoading" element-loading-text="Loading">
    <mainmap v-on:initmap="initmap"></mainmap>
  </div>
  </div>
</template>

<script>
  import Mainmap from '@/components/Mainmap'
  import search from  './search'
  import {wgs84togcj02,gcj02tobd09,bd09togcj02,gcj02towgs84 } from '@/utils/index'
  import {findThermoChartData} from '@/api/map'
  import moment from 'moment'
  import { Message } from 'element-ui'

  export default {
    name: "Thermodynamic",
    data (){
      return {
        map:null,
        listLoading:false,
        data:{},
        listQuery:{
          startDate:moment(new Date()).format("YYYY-MM-DD")+' ' +'00:00:00',
          endDate:moment(new Date()).format("YYYY-MM-DD")+' ' +'12:00:00'
        },
        issetvie:false,
        maxLng:'',
        maxLat:'',
        minlng:'',
        minlat:'',
        zoom:12
      }
    },
    components:{
      Mainmap,
      search
    },
    methods: {
      initmap(map) {
        this.map = map;
        this.location(map)
        let _this=this
        map.addEventListener('zoomend', function () {
          if(!_this.issetvie){
            _this.issetvie=false
            _this.bounds()
          }
        });

        map.addEventListener('moveend', function () {
          if(!_this.issetvie){
            _this.issetvie=false
            _this.bounds()
          }
        });
      },
      location(map){
        function myFun(result){
          let cityName = result.name;
          map.setCenter(cityName);
        }
        let myCity = new BMap.LocalCity();
        myCity.get(myFun);
      },
      seach(data){
        this.formline=data
        if(data.reset) {
          this.issetvie=false
          this.map.setZoom(12)
          this.location(this.map)
        }else {
          this.issetvie=true
          this.fetchData(data)
        }
      },
      fetchData(data){
        this.listLoading = true
        findThermoChartData(data).then(response => {
          if(response && response.body){
            this.initheat(response.body)
          }else {
            this.initheat([])
          }
          this.listLoading = false
        })
      },
      /**@获取区域经纬度和当前的缩放等级**/
      bounds(){
        let bounds=this.map.getBounds(),
          sw=bounds.getSouthWest(),
          ne=bounds.getNorthEast()
        let pin1=bd09togcj02(ne.lng,ne.lat);
        let newPonit1=gcj02towgs84(pin1[0],pin1[1]);
        let pin2=bd09togcj02(sw.lng,sw.lat);
        let newPonit2=gcj02towgs84(pin2[0],pin2[1]);

        this.maxLng=newPonit1[0]
        this.maxLat=newPonit1[1]
        this.minLng=newPonit2[0]
        this.minLat=newPonit2[1]
        this.zoom=this.map.getZoom()
        this.fetchData({
          zoom:this.zoom,
          maxLng:this.maxLng,
          maxLat:this.maxLat,
          minLat:this.minLat,
          minLng:this.minLng,
          ...this.listQuery
        })
      },
      initheat(points){
        let map=this.map
        map.clearOverlays();
        if(points.length>0){
          let newPoints=[]
          let newPBMap=[]
          for(let i=0;i<points.length;i++){
            let obj={}
            let nep=wgs84togcj02(points[i].lng,points[i].lat)
            let bcnep=gcj02tobd09(nep[0],nep[1])

            obj.lng=bcnep[0]
            obj.lat=bcnep[1]
            obj.count=points[i].count
            newPoints.push(obj)
            newPBMap.push(new BMap.Point(bcnep[0],bcnep[1]))
          }

            var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
            map.addOverlay(heatmapOverlay);
            heatmapOverlay.setDataSet({data:newPoints,max:100});

            //是否显示热力图
            function openHeatmap(){
              heatmapOverlay.show();
            }
            function closeHeatmap(){
              heatmapOverlay.hide();
            }
            closeHeatmap();
            openHeatmap()


          //判断浏览区是否支持canvas
          function isSupportCanvas(){
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
          }

          if(!isSupportCanvas()){
            alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
          }

          if(this.issetvie) map.setViewport(newPBMap);    //调整视野
        }else {
          console.log('没有相关骑行信息')
          // Message({
          //   message: '没有相关骑行信息',
          //   type: 'error',
          //   duration: 2 * 1000
          // })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .map-box{
    height: calc(100vh - 280px);
    position: relative;
  }
</style>
